const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    del = require('del'),
    connect = require('gulp-connect'),
    sass = require('gulp-sass'),
    { createProxyMiddleware } = require('http-proxy-middleware')
    // 制定一个删除dist的任务
const delDist = () => del('dist')

// 制定html任务：对html文件完成压缩后放入dist目录
const html = () => {
        //** 代表所有所有目录，*代表所有文件
        return gulp.src('src/**/*.html').pipe(htmlmin({
            removeComments: true, // 清除HTML注释
            collapseWhitespace: true, // 压缩HTML
            collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
            minifyJS: true, // 压缩页面JS
            minifyCSS: true // 压缩页面CS
        })).pipe(gulp.dest('dist')).pipe(connect.reload())
    }
    // 执行css任务
const css = () => {
        //** 代表所有所有目录，*代表所有文件
        return gulp.src('src/css/**/*.scss').pipe(sass()).pipe(autoprefixer({
            cascade: false
        })).pipe(cleanCss()).pipe(gulp.dest('dist/css')).pipe(connect.reload())
    }
    // 执行js任务
const js = () => {
        //** 代表所有所有目录，*代表所有文件
        return gulp.src('src/js/**/*.js').pipe(babel({
            presets: ['@babel/env']
        })).pipe(uglify()).pipe(gulp.dest('dist/js')).pipe(connect.reload())
    }
    // 制定img任务：移动图片
const imgs = () => gulp.src('src/images/**').pipe(gulp.dest('dist/images'))
    // 制定libs任务
const libs = () => gulp.src('src/libs/**').pipe(gulp.dest('dist/libs'))
const php = () => gulp.src('src/php/*.php').pipe(gulp.dest('dist/php'))

// 制定server任务,在dis目录开启服务器
// middleware:中间件，在前端请求和返回响应中间做一些处理
const server = () => {
        connect.server({
            root: 'dist',
            port: 666,
            livereload: true,
            middleware() {
                return [
                    createProxyMiddleware('/api', {
                        target: "http://xiongmaoyouxuan.com",
                        changeOrigin: true
                    })
                ]
            }
        })

    }
    // 制定监听任务
const watch = () => {
        gulp.watch('src/**/*.html', html)
        gulp.watch('src/**/*.js', js)
        gulp.watch('src/**/*.scss', css)
    }
    // module.exports = {
    //         html,
    //         css,
    //         js
    //     }
    // 最后在命令行里面用gulp 名字执行
module.exports.default = gulp.series(delDist, gulp.parallel(css, html, js, delDist, imgs, libs, server, php, watch))